<template>
    <div>
        
        <div class="mani">
            <div class="detail_avatar">
                <el-image style="width: 72px; height: 72px; border-radius: 50%"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />

                <div class="teacher_info">
                    <div class="name">{{ teacherData?.real_name }}</div>
                    <div class="role">教师</div>
                </div>
            </div>

            <div class="details_main_info">
                <div class="detail_item">
                    <div class="item_title">所属院系</div>
                    <div class="item_content">
                        {{ teacherData?.classes?.map((e) => e?.college?.name)?.join(",") }}
                    </div>
                </div>

                <div class="detail_item">
                    <div class="item_title">所属班级</div>
                    <div class="item_content">
                        {{ teacherData?.classes?.map((e) => e?.name)?.join(",") }}
                    </div>
                </div>

                <div class="detail_item">
                    <div class="item_title">班级学生（人）</div>
                    <div class="item_content">{{ teacherData?.student_num }}</div>
                </div>

                <div class="detail_item">
                    <div class="item_title">学生作品</div>
                    <div class="item_content">{{ teacherData?.works_num }}</div>
                </div>

                <div class="detail_item">
                    <div class="item_title">账号状态</div>
                    <div class="item_content">
                        <span style="color: #1abc9c" v-if="teacherData?.status == 1">• 启用</span>
                        <span style="color: #f59a23" v-else>• 停用</span>
                    </div>
                </div>
            </div>

            <div class="details_action">
                <el-button type="primary" @click="handleEdit(teacherData)">修改资料</el-button>
                <el-button @click="setStatusFn(teacherData)">设置状态</el-button>
                <el-button @click="resetPassword(teacherData)">重置密码</el-button>
            </div>
        </div>


        <el-card body-style="padding: 12px 24px" class="!border-none" style="margin-top: 20px" shadow="never">
            <el-tabs   v-model="activeName" class="demo-tabs">
            <el-tab-pane label="班级学生" name="first"><studio-list /></el-tab-pane>
            <el-tab-pane label="教师详情" name="second">
                <teacher-detail-info :data="teacherData" />
            </el-tab-pane>
            <!-- <el-tab-pane label="登录日志" name="third"> </el-tab-pane>
            <el-tab-pane label="操作记录" name="fourth"> </el-tab-pane> -->
        </el-tabs>
        </el-card>

        

        <add-user-pop v-if="popShow" ref="addUserPopRef" @close="popClose" @submit="popConfirm" :is-change="popType"
            :is-set-status="isSetStatus" :title="popTitle" :is-reset-password="isResetPassword" />
    </div>
</template>
<script lang="ts" setup name="consumerLists">
import { getTeacherDetail } from "@/api/consumer";
import studioList from "./components/studioList/index.vue";
import teacherDetailInfo from "./components/teacherDetailInfo/index.vue";
import { useRequest } from "vue-hooks-plus";
import addUserPop from "../modals/addUserPop.vue";

// 获取当前的url ?后面的参数
const route = useRoute();

// 获取老师详情
const { data: teacherData, run } = useRequest(async () => {
    const _res = await getTeacherDetail({
        id: route?.query?.id,
    });

    return _res;
});

const activeName = ref("first");

//弹框ref
const addUserPopRef = shallowRef();

const popShow = ref(false);

let popType = ref(false);

// 是否设置状态
let isSetStatus = ref(false);
let popTitle = ref("");
// 是否重置密码
let isResetPassword = ref(false);

const initType = () => {
    popType.value = false;
    popTitle.value = "";
    isSetStatus.value = false;
    isResetPassword.value = false;
};

//弹框关闭
const popClose = () => {
    initType();
    popShow.value = false;
};

const popConfirm = () => {
    initType();
    run();
    popShow.value = false;
};

const handleEdit = async (data: any) => {
    popShow.value = true;
    popType.value = true;
    popTitle.value = "修改资料";
    await nextTick();
    addUserPopRef.value.open();

    const _classes_ids = data.classes.map((item: any) => {
        return [item?.college_id, item?.id];
    });

    addUserPopRef.value.setFormData({
        ...data,
        password_confirm: data.password,
        status: data?.status === 1,
        classes_ids: _classes_ids,
    });
};

const setStatusFn = async (data: any) => {
    popShow.value = true;
    isSetStatus.value = true;
    popTitle.value = "设置状态";
    await nextTick();
    addUserPopRef.value.open();

    const _classes_ids = data.classes.map((item: any) => {
        return [item?.college_id, item?.id];
    });

    addUserPopRef.value.setFormData({
        ...data,
        password_confirm: data.password,
        status: data?.status === 1,
        classes_ids: _classes_ids,
    });
};

// 重置密码
const resetPassword = async (data: any) => {
    popShow.value = true;
    //   isSetStatus.value = true;
    isResetPassword.value = true;
    popTitle.value = "重置密码";
    await nextTick();
    addUserPopRef.value.open();

    const _classes_ids = data.classes.map((item: any) => {
        return [item?.college_id, item?.id];
    });

    addUserPopRef.value.setFormData({
        ...data,
        password_confirm: data.password,
        status: data?.status === 1,
        classes_ids: _classes_ids,
    });
};
</script>

<style lang="scss" scoped>
.mani {
    width: 100%;
    height: 150px;
    background-image: inherit;
    background-position: inherit;
    background-size: inherit;
    background-repeat: inherit;
    background-attachment: inherit;
    background-origin: inherit;
    background-clip: inherit;
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(233, 233, 233);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.047) 0px 0px 5px;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    line-height: 20px;
    display: flex;
    align-items: center;

    padding-left: 40px;

    justify-content: space-between;

    padding-right: 40px;
}

.detail_avatar {
    display: flex;
    align-items: center;
}

.teacher_info {
    .name {
        width: 74px;
        height: 31px;
        display: flex;
        font-family: "FontAwesome Bold", FontAwesome, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 20px;
        line-height: 28px;
        display: flex;
        justify-content: center;
    }
}

.role {
    width: 80px;
    height: 26px;
    background-image: inherit;
    background-position: inherit;
    background-size: inherit;
    background-repeat: inherit;
    background-attachment: inherit;
    background-origin: inherit;
    background-clip: inherit;
    background-color: rgb(255, 169, 76);
    border: none;
    border-radius: 49px;
    box-shadow: none;
    font-family: "微软雅黑 Regular", 微软雅黑, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: rgb(255, 255, 255);
    line-height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.details_main_info {
    display: flex;
    justify-content: center;
    justify-content: space-between;

    .detail_item {
        width: 180px;
        height: 50px;
        display: flex;
        font-family: 微软雅黑, sans-serif;
        font-weight: 400;
        font-style: normal;
        text-align: left;
        line-height: 28px;
        display: flex;
        flex-direction: column;
        color: #999999;

        .item_title {
            font-size: 14px;
        }

        .item_content {
            font-size: 16px;
        }
    }
}

.details_action {}
</style>
